<template>
  <el-card :class="{ 'my-normal-form-bg': true, 'special-form': !isShowCard }" :shadow="shadow">
    <div v-if="pageTitle" slot="header" class="page-title" :style="{marginLeft: isShowCard ? '10px' : '0'}">
      <span>{{ pageTitle }}</span>
    </div>
    <slot name="block"></slot>
    <div class="operate-form">
      <el-form ref="operateForm" :model="operateForm" @submit.prevent.native label-suffix=":">
        <el-row :gutter="40" style="display: flex;flex-wrap: wrap;">
          <el-col v-for="(element, index) in formList" :key="index" :xs="element.xs || 24" :sm="element.sm || 12" :md="element.md || 8" :lg="element.lg || 6" :xl="element.xl || 4" style="padding: 0;">
            <el-form-item :prop="element.prop" :label="element.label" v-if="element.showLabel" size="display:flex;" label-width="100px">
              <el-date-picker v-model="operateForm[element.prop]" size="small" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :value-format="element.formate" style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item :prop="element.prop" v-else :label="element.formLabel ? element.label : ''" :class="element.formLabel ? 'showFormLabel' : ''">
              <el-input v-if="element.type === 'INPUT'" v-model="operateForm[element.prop]" :placeholder="element.defaultNoLabel ? element.label : '请输入' + element.label" style="width: 100%;" :clearable="true" @change="specialSearch">
                <i v-if="formList.length == 1" slot="suffix" class="el-input__icon el-icon-search" style="cursor: pointer;" @click="specialSearch"></i>
              </el-input>
              <!-- 普通下拉框 -->
              <el-select v-if="element.type === 'SELECT'" v-model="operateForm[element.prop]" :placeholder="element.defaultNoLabel ? element.label : '请选择' + element.label" :multiple="element.multiple || false" style="width: 100%;" clearable @change="selectChange(element.about)" filterable>
                <el-option v-for="item in enumOpt[element.emunName]" :key="item.dictValue" :value="item.dictValue" :label="item.dictLabel" :disabled="item.disabled || false"/>
              </el-select>
              <!-- 单选 -->
              <el-radio-group v-if="element.type === 'RADIO'" v-model="operateForm[element.prop]">
                <el-radio v-for="item in enumOpt[element.emunName]" :key="item.value" :label="item.value">{{item.label}}</el-radio>
              </el-radio-group>
              <!--  级联,只选最后一级            -->
              <el-cascader
                v-if="element.type === 'CASCADER'" :show-all-levels="false" clearable :multiple="element.multiple"
                :props="element.props" style="width: 100%" filterable :placeholder="element.defaultNoLabel ? element.label : '请选择' + element.label"
                v-model="operateForm[element.prop]"
                :options="enumOpt[element.emunName]"></el-cascader>
              <!-- 管理机构（可选层级） -->
              <mechanism-cascader v-if="element.type === 'MANAGE_COM'" :deptId.sync="operateForm[element.prop]" style="width: 100%;"></mechanism-cascader>
              <!-- 管理机构（只选最后一级） -->
              <Treeselect v-if="element.type === 'SINGLE_MANAGE_COM'" class="tree-select-user" v-model="operateForm[element.prop]" :options="enumOpt[element.emunName]" :disable-branch-nodes="true" :show-count="true" :placeholder="'请选择' + element.label" style="width: 100%;"></Treeselect>
              <!-- 执行员工 -->
              <staff-cascader v-if="element.type === 'EMPLOYEE'" :multiple="element.multiple" :placeholder="'请选择' + element.label" :employee.sync="operateForm[element.prop]" style="width: 100%;"></staff-cascader>
              <!-- 创建人 -->
              <select-staff v-if="element.type === 'STAFF'" :staff.sync="operateForm[element.prop]" :placeholder="element.defaultNoLabel ? element.label : '请选择' + element.label" style="width: 100%;"></select-staff>
              <!-- 日期区间 -->
              <el-date-picker v-if="element.type === 'DATE_RANGE'" v-model="operateForm[element.prop]" type="daterange" range-separator="至" :start-placeholder="element.label + '开始日期'" :end-placeholder="element.label + '结束日期'" :value-format="element.formate" style="width: 100%;" @change="dateChange"></el-date-picker>
              <!-- 特殊下拉关联日期 -->
              <template v-if="element.type === 'SPECIAL_SELECT'">
                <el-select v-model="operateForm[element.prop]" :clearable="false" style="width: 100%;" @change="selectDateType">
                  <el-option v-for="item in enumOpt[element.emunName]" :key="item.dictValue" :value="item.dictValue" :label="item.dictLabel" />
                </el-select>
              </template>
              <template v-if="element.type === 'SPECIAL_DATE'">
                <!-- 按天 -->
                <el-date-picker v-if="operateForm[element.aboutProp] === '0'" v-model="operateForm[element.prop]" type="daterange" key="d" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="element.pickerOptions || {}" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                <!-- 自然周 -->
                <el-date-picker v-if="operateForm[element.aboutProp] === '1'" v-model="operateForm[element.prop]" type="week" key="w" format="yyyy 第 WW 周" placeholder="选择周" value-format="yyyy-MM-dd" :picker-options="element.pickerOptions || {}" style="width: 100%;"></el-date-picker>
                <!-- 自然月 -->
                <el-date-picker v-if="operateForm[element.aboutProp] === '2'" v-model="operateForm[element.prop]" type="month" key="m" placeholder="选择月" value-format="yyyy-MM-dd" :picker-options="element.pickerOptions || {}" style="width: 100%;"></el-date-picker>
                <!-- 自然年 -->
                <el-date-picker v-if="operateForm[element.aboutProp] === '3'" v-model="operateForm[element.prop]" type="year" key="y" placeholder="选择年" value-format="yyyy-MM-dd" :picker-options="element.pickerOptions || {}" style="width: 100%;"></el-date-picker>
              </template>
              <!--
                   使用 RADIO_DATE_SELECT 目前已固定3个枚举，如增加需要更改 radioDateSelect 中方法
                   0 : 今日 / 1 : 最近7天 / 2 : 最近30天
                    -->
              <template v-if="element.type === 'RADIO_DATE_SELECT'">
                <el-radio-group v-model="operateForm[element.prop]" style="display: flex;justify-content: space-evenly" @input="radioDateSelect">
                  <div v-for="item in enumOpt[element.emunName]" :key="item.dictValue">
                    <el-radio-button :label="item.dictValue">{{ item.dictLabel }}</el-radio-button>
                  </div>
                </el-radio-group>
              </template>
            </el-form-item>
          </el-col>
           <el-col :xs="24" :sm="12" :md="8" :lg="6" style="opacity:0; height:52px; padding: 0;" v-if="isNoinfo">占位</el-col>
          <div class="btn" :style="{bottom: formList.length > 1 ? 0 : '10px'}">
            <template v-if="(formList.length > 1 && btnNormalRule) && !radioBtnDate">
              <el-button type="primary" icon="el-icon-search" :v-hasPermi="btnNormalRule" @click="handleQuery">查 询</el-button>
              <el-button type="info" icon="el-icon-refresh" :v-hasPermi="btnNormalRule" plain @click="handleReset">重 置</el-button>
            </template>
            <template v-else-if="(formList.length > 1 || showSearchBtn) && !radioBtnDate">
              <el-button type="primary" icon="el-icon-search" @click="handleQuery">查 询</el-button>
              <el-button type="info" icon="el-icon-refresh" plain @click="handleReset">重 置</el-button>
            </template>
            <slot name="more-btn"></slot>
          </div>
        </el-row>
      </el-form>
    </div>
  </el-card>
</template>

<script>
import { mechanismCascader, SelectStaff, StaffCascader } from "@/components/index.js";
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  name: 'NormalForm',
  components: {
    mechanismCascader,
    SelectStaff,
    StaffCascader,
    Treeselect
  },
  props: {
    pageTitle: {
      type: String,
      default: ''
    },
    operateForm: {
      type: Object,
      default: () => {}
    },
    formList: {
      type: Array,
      default: () => []
    },
    enumOpt: {
      type: Object,
      default: () => {}
    },
    isShowCard: {
      type: Boolean,
      default: true
    },
    shadow:  {
      type: String,
      default: 'never'
    },
    btnNormalRule:  {
      default: null
    },
    showSearchBtn: {
      type: Boolean,
      default: false,
    },
    isNoinfo: {
      type: Boolean,
      default: true,
    }
  },
  data() {
    return {
    }
  },
  computed: {
    radioBtnDate(){
      const arr = this.formList.filter(item => item.type)
      const obj1 = this.formList.some(obj => obj.type === 'DATE_RANGE');
      const obj2 = this.formList.some(obj => obj.type === 'RADIO_DATE_SELECT');
      const result = obj1 && obj2;
      console.log(arr.length == 2 && result, result)
      return arr.length == 2 && result
    }
  },
  methods: {
    handleQuery() {
      this.$emit('handleQuery', this.operateForm);
    },
    handleReset() {
      this.$emit('handleReset');
    },
    // 当只有一个搜索条件时，使用单个触发查询
    specialSearch() {
      console.log(this.operateForm, 'operateForm')
      if (this.formList.length == 1) this.$emit('specialSearch', this.operateForm);
    },
    // 下拉关联情况
    selectChange(about) {
      if (about) {
        this.$emit('selectChange', about)
      }
    },
    // 特殊下拉关联日期
    selectDateType() {
      this.$emit('selectDateType')
    },
    // 特殊根据单选 触发日期
    radioDateSelect(val){
      let da = 0
      if(this.formList.some(item => item.type == 'DATE_RANGE')){
        if(val == '0'){
          da = 0
        }else if(val == '1'){
          da = 7
        }else if(val == '2'){
          da = 30
        }
        let currentDate = new Date();
        let nowDate = new Date()
        nowDate.setHours(23,59,59,59)
        let endDate = currentDate.toISOString().substring(0, 10)
        currentDate.setHours(0, 0, 0, 0); // 将时间设置为当天的凌晨
        // let endDate = currentDate.toISOString().substring(0, 10); // 当天的日期作为结束日期
        currentDate.setDate(currentDate.getDate() - da + 1); // 将日期设置为需要的天数
        let startDate = currentDate.toISOString().substring(0, 10); // 将设置的天数作为开始日期
        let datesArray = [startDate, endDate]
        this.operateForm[this.formList.filter(item => item.type == 'DATE_RANGE')[0].prop] = datesArray
        this.$set(this.operateForm, this.formList.filter(item => item.type == 'DATE_RANGE')[0].prop, datesArray)
      }
      if(this.radioBtnDate) this.$emit('radioDateSelect', this.operateForm)
    },
    dateChange(val){
      if(this.formList.some(item => item.type == 'RADIO_DATE_SELECT')){
        this.operateForm[this.formList.filter(item => item.type == 'RADIO_DATE_SELECT')[0].prop] = ''
        this.$set(this.operateForm, this.formList.filter(item => item.type == 'RADIO_DATE_SELECT')[0].prop, '')
      }
      if(this.formList.length == 1 || this.radioBtnDate) this.$emit('dateChange', this.operateForm)
    },
  },
}
</script>

<style lang="scss" scoped>
.my-normal-form-bg{
  padding: 16px;
  border: 0;
  overflow: visible;
  .page-title{
    font-size: 20px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #2A2A2A;
    margin-left: 10px;
  }
  //.operate-form {
    position: relative;
    .btn {
      position: absolute;
      bottom: 0px;
      right: 10px;
      .el-button {
        margin: 0 0 10px 16px;
      }
    }
  //}
  ::v-deep.el-card__body {
    padding: 10px 20px 0 20px;
  }
  ::v-deep.el-card__header {
    padding: 8px 0 0 0;
    border: 0;
  }
}
.tree-select-user>.vue-treeselect__control {
  width: 100% !important;
}
.special-form{
  padding: 16px 10px 16px 10px;
  border: 0;
  background-color: #ffffff00;
  ::v-deep.el-card__body {
    padding: 0;
  }
  ::v-deep.el-card__header {
    padding: 0;
    border: 0;
  }
}

::v-deep.el-radio-button--small .el-radio-button__inner {
  //padding: 9px 26px;
  border: 1px solid #eee;
}

.showFormLabel{
  display: flex;
  ::v-deep.el-form-item__content{
    flex: 1;
  }
}
</style>
